<template>
    <div class="demo-input-size">

        <el-col span="4" offset="5">
            <el-input v-model="selLike.productName"></el-input>
        </el-col>
        <el-col span="2">
            <el-button type="primary" @click="selByLike" icon="el-icon-search">查询</el-button>
        </el-col>
        <el-col span="2" offset="4">
            <el-button type="success" @click="addP" icon="el-icon-circle-plus">增加</el-button>
        </el-col>

        <el-col v-for="(item, index) in productList" :key="index">
            <br>

            <el-card class="box-card" shadow="hover">

                <el-descriptions title="产品信息">
                    <el-descriptions-item label="产品编号" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{
                            item.productId
                    }}</el-descriptions-item>
                    <el-descriptions-item label="产品名称" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{
                            item.productName
                    }}</el-descriptions-item>
                    <el-descriptions-item label="产品类型" :contentStyle='contentStyle' :labelStyle='labelStyle'><el-tag
                            size="small">{{ item.productType }}</el-tag></el-descriptions-item>
                    <el-descriptions-item label="贷款额度" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{
                            item.productLoanAmount
                    }}</el-descriptions-item>
                    <el-descriptions-item label="贷款利率" :contentStyle='contentStyle' :labelStyle='labelStyle'><el-tag
                            size="small">{{ item.productRate }}</el-tag></el-descriptions-item>
                    <el-descriptions-item label="贷款期限" :contentStyle='contentStyle' :labelStyle='labelStyle'><el-tag
                            size="small">{{ item.loanTime }}</el-tag></el-descriptions-item>
                    <el-descriptions-item label="产品介绍" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{
                            item.productLoanAmount
                    }}</el-descriptions-item>
                    <el-descriptions-item label="产品状态" :contentStyle='contentStyle' :labelStyle='labelStyle'>{{
                            item.productState
                    }}</el-descriptions-item>

                    <el-descriptions-item label="操作" :contentStyle='contentStyle' :labelStyle='labelStyle'>

                        <el-button type="primary" size="mini" icon="el-icon-edit"
                            @click="handleEdit(item.productId)">修改</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="handleDelete(item.productId)">
                            <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                        </el-popconfirm>

                    </el-descriptions-item>

                </el-descriptions>

            </el-card>

        </el-col>


        <el-dialog title="修改产品信息" :visible.sync="dialog.updateshow" width="30%">
            <el-form :model="form">
                <el-input type="hidden" v-model="updateProduct.productId"></el-input>
                <el-form-item label="产品名称" :label-width="formLabelWidth">
                    <el-input v-model="updateProduct.productName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品介绍" :label-width="formLabelWidth">
                    <el-input v-model="updateProduct.productIntroduction" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品亮点" :label-width="formLabelWidth">
                    <el-input v-model="updateProduct.productHighlights" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品标签">
                    <el-radio-group v-model="updateProduct.productLabel">
                        <el-radio label="1">新品</el-radio>
                        <el-radio label="2">推荐</el-radio>
                        <el-radio label="3">精品</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="贷款利率">
                    <el-input v-model="updateProduct.productRate"></el-input>
                </el-form-item>
                <el-form-item label="贷款额度">
                    <el-input v-model="updateProduct.productLoanAmount"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.updateshow = false">取 消</el-button>
                <el-button type="primary" @click="updateP">提 交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            productList: {},
            selLike: {
                productName: "",
                currentPage: 1,
                pageSize: 5
            },
            product: {},
            updateProduct: {},
            dialog: {
                updateshow: false,
            },
            contentStyle: {
                'text-align': 'center',
            },
            labelStyle: {
                'width': '100px'
            }
        };
    },
    methods: {
        addP() {
            this.$router.replace("/AddLoan");
        },
        loadProduct() {
            this.$axios.get("/products/selectAll").then((res) => {
                this.productList = res.data.data.product;
            });
        },
        selByLike() {
            this.$axios.post("/products/query", this.selLike).then((res) => {
                this.productList = res.data.data.product;
            });
        },
        selOne() {
            this.$axios.get("/products" + productId).then((res) => {
                this.product = res.data.data.product;
                this.page.total = res.data.data.total;
            });
        },
        updateP() {
            this.$axios.put("/products", this.updateProduct).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '产品信息修改成功！',
                        type: 'success'
                    });
                    this.dialog.updateshow = false;
                    this.loadProduct();
                } else {
                    this.$message({
                        message: '修改失败，请检查参数格式！',
                        type: 'error'
                    });
                }
            });
        },
        handleDelete(productId) {
            this.$axios.delete("/products/" + productId).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                    this.loadProduct();
                } else {
                    this.$message({
                        message: '删除失败，请重试！',
                        type: 'error'
                    });
                }
            });
        },
        handleEdit(productId) {
            this.dialog.updateshow = true;
            this.$axios.get("/products/" + productId).then((res) => {
                this.updateProduct = res.data.data.product;
            });
        }
    },
    mounted() {
        this.loadProduct();
    }
};
</script>
<style>
.box-card {
    width: 1000px;
    align-content: center;
    margin-left: 150px;
}
</style>
